<template>
    <div class="Login">

        <div class="content">
            <div class="left">
                <p class="text_big">欢迎回来</p>
                <p class="text_litte">
                    还没有账号?
                    <a>
                        <router-link to="/Register">立即注册</router-link>
                    </a>
                    <el-button type="text"></el-button>

                </p>
                <div class="form_dl">
                    <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="120px" class="demo-ruleForm">
                        <el-form-item label="请输入用户名" prop="username">
                            <el-input type="text" v-model="ruleForm2.username" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="请输入密码" prop="Pass">
                            <el-input type="password" v-model="ruleForm2.Pass" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button class="sub" @click="submitForm('ruleForm2')"></el-button>
                            <p id="forget">
                                <router-link to="/ChangePassword"><a>忘记密码？</a></router-link>
                            </p>
                        </el-form-item>
                    </el-form>
                </div>

            </div>
            <div class="right">
                <div class="right_title rw">第三方账号登陆</div>
                <input type="button" class="weibo rw" name="weibo">
                <input type="button" class="weixin rw" name="weixin">
                <input type="button" class="QQ rw" name="QQ">
            </div>

        </div>
    </div>
</template>
<script>
    export default {
        data() {

            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入用户名'));
                } else {
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    callback();
                }
            };
            return {
                ruleForm2: {
                    username: '',
                    Pass: '',

                },
                rules2: {
                    username: [{
                        validator: validatePass,
                        trigger: 'blur'
                    }],
                    Pass: [{
                        validator: validatePass2,
                        trigger: 'blur'
                    }]

                }
            };
        },
        methods: {

            open(val) {
                this.$message({
                    type: 'info',
                    message: `提示: ${ val }`
                });

            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        var _this = this;
                        var params = new URLSearchParams();
                        params.append('name', this.ruleForm2.username);
                        params.append('checkPass', this.ruleForm2.Pass);
                        this.http.post('/users/login', params).then(
                            function (res) {
                                if (res.data == -4) {
                                    _this.open("用户名不存在", "提示");
                                } else if (res.data == 1) {
                                    _this.open("登陆成功", "提示");
                                    _this.$router.push({
                                        path: '/'
                                    })
                                    _this.$store.commit('setLoginedFn', {
                                        status: true,
                                        name:_this.ruleForm2.username
                                    })
                                } else if (res.data == -1) {
                                    _this.open("密码错误，请重新输入");
                                } else {
                                    _this.open("服务器正在忙", "提示");
                                }
                            }
                        ).catch(
                            function (err) {
                                console.log(err);
                            }
                        );
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>


<style scoped>
    /*css 初始化 */

    html,
    body,
    ul,
    li,
    ol,
    dl,
    dd,
    dt,
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    form,
    fieldset,
    legend,
    img {
        margin: 0;
        padding: 0;
    }

    fieldset,
    img,
    input,
    button {
        border: none;
        padding: 0;
        margin: 0;
        outline-style: none;
    }

    ul,
    ol {
        list-style: none;
    }

    input {
        padding-top: 0;
        padding-bottom: 0;
        font-family: "SimSun", "宋体";
    }

    select,
    input {
        vertical-align: middle;
    }

    select,
    input,
    textarea {
        font-size: 12px;
        margin: 0;
    }

    textarea {
        resize: none;
    }
    /*防止拖动*/

    img {
        border: 0;
        vertical-align: middle;
    }
    /*  去掉图片低测默认的3像素空白缝隙*/

    table {
        border-collapse: collapse;
    }

    body {
        font: 12px/150% Arial, Verdana, "\5b8b\4f53";
        color: #666;
        background: #F2F2F2
    }

    a {
        color: #666;
        text-decoration: none;
    }

    a:hover {
        color: #C81623;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        text-decoration: none;
        font-weight: normal;
        font-size: 100%;
    }



    .col-red {
        color: #C81623 !important;
    }
    /*公共类*/

    .w {
        /*版心 提取 */
        width: 960px;
        margin: 0 auto;
    }

    .fl {
        float: left
    }

    .fr {
        float: right
    }

    .rw {
        width: 170px;
        height: 45px;
    }
    /*content开始*/

    .content {
        margin: 0 auto;
        width: 960px;
        height: 494px;
        background: white;
        margin-top: 4px;
    }

    .content .left {
        float: left;
        margin-left: 130px;
        margin-top: 50px;
        width: 530px;
    }

    .left .text_big {

        width: 150px;
        height: 95px;
        font-size: 32px;
        font-family: '宋体';
        font-weight: 600;
    }

    .left .text_litte {
        font-size: 16px;
        width: 180px;
        height: 50px;
        float: right;
    }

    .left .form_dl {
        width: 440px;
        height: 252px;
        float: left;
        margin-left: 50px;
    }

    .sub {
        background: url(../assets/images/login/login_u51.png) no-repeat center;
        width: 320px;
        height: 38px;
    }
    /*鼠标移过变亮*/

    .sub:hover {
        background: url(../assets/images/login/login_u53.png) no-repeat center;
    }

    .left #forget {
        width: 80px;
        height: 50px;
        float: right;
        font-size: 14px;
    }



    .content .right {
        width: 160px;
        height: 300px;
        float: right;
        margin-top: 50px;
        margin-right: 50px;
    }

    .right .right_title {
        font-size: 18px;
        text-align: center;
        font-family: '宋体';
        font-weight: 600;
        margin-bottom: 15px;
    }

    .right .weibo {
        margin-bottom: 15px;
        background: url(../assets/images/login/login_u26.png) no-repeat top center;
    }
    /*鼠标移过变亮*/

    .right .weibo:hover {
        background: url(../assets/images/login/login_u28.png) no-repeat top center;
    }

    .right .weixin {
        margin-bottom: 15px;
        background: url(../assets/images/login/login_u31.png) no-repeat top center;
    }
    /*鼠标移过变亮*/

    .right .weixin:hover {
        background: url(../assets/images/login/login_u33.png) no-repeat top center;
    }

    .right .QQ {
        margin-bottom: 15px;
        background: url(../assets/images/login/login_u36.png) no-repeat top center;
    }
    /*鼠标移过变亮*/

    .right .QQ:hover {
        background: url(../assets/images/login/login_u38.png) no-repeat top center;
    }
    /*footer开始*/

    .footer p {
        font-size: 12px;
        line-height: 12px;
        color: #ABACAD;
        text-align: center;
    }
    /*footer结束*/
</style>